<template>
  <div class="main">
    <el-row>
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-table :data="tableDataOne" border style="width: 100%">
            <el-table-column prop="value" align="center" label="名称" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClickOne(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="grid-content bg-purple-light">
          <el-table :data="tableDataToo" border style="width: 100%">
            <el-table-column prop="value" align="center" label="名称" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClickToo(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
    </el-row>
    <!--滑动展示查看-->
    <el-drawer
      title="详情"
      :visible.sync="drawer"
      :with-header="false"
      :wrapperClosable="false"
    >
      <GradeDia
        v-if="drawer"
        :draweVisible="drawer"
        v-on:draweVisible="closeDrewer($event)"
        :classify="classify"
        :valueName="valueName"
      ></GradeDia>
    </el-drawer>
  </div>
</template>
<script>
import { getClassify } from "../../../src/assets/js/api";
import GradeDia from "../../components/system/GradeDia";

export default {
  name: "DtgGrade",
  components: { GradeDia },
  data() {
    return {
      tableDataOne: [],
      tableDataToo: [],
      drawer: false,
      classify: "",
      valueName: ""
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  methods: {
    getList() {
      getClassify().then(res => {
        if (res.code == 200) {
          this.tableDataOne = [res.data[0]];
          this.tableDataToo = [res.data[1]];
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleClickOne(row) {
      this.classify = row.id;
      this.valueName = row.value;
      this.drawer = true;
    },
    handleClickToo(row) {
      this.classify = row.id;
      this.valueName = row.value;
      this.drawer = true;
    },
    closeDrewer(msg) {
      this.drawer = msg;
    }
  }
};
</script>
<style scoped type="less">
.main {
  padding: 20px;
  background-color: white;
}
</style>
